<template>
	<view v-if="goodsDetail">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" circular :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in goodsDetail.banners[0].split(',')" :key="index">
				<image :src="item" @click="preview(index)" />
			</swiper-item>
		</swiper>
		<!-- 商品详情 -->
		<view class="info">
			<van-tag type="danger" size="large">自营</van-tag>
			<text style="margin-left:10rpx;">{{goodsDetail.proname}}</text>
			<view class="price">￥{{format.formatPrice(goodsDetail.originprice)}}</view>
		</view>
		<!-- 商品导航 -->
		<view class="goods-carts">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

		<!-- 	<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" dot />
			<van-goods-action-icon icon="cart-o" text="购物车" v-if="store.totalCount > 0" :info="store.totalCount" />
			<van-goods-action-icon icon="cart-o" text="购物车" v-else />
			<van-goods-action-icon icon="shop-o" text="店铺" />
			<van-goods-action-button text="加入购物车" type="warning" @click="add" />
			<van-goods-action-button text="立即购买" />
		</van-goods-action> -->
	</view>
</template>

<script setup lang="ts">
	import { getGoodsDetail } from '../../api/goods'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, watch } from 'vue'
	import { Goods } from '../../types/goods';
	import { useCartStore } from '../../stores/cart'
	import { useFormat } from '../../hooks'

	const format = useFormat()

	const store = useCartStore()

	// 定义模型
	const goodsDetail = ref<Goods>(null)
	const options = ref([{
		icon: 'headphones',
		text: '客服'
	}, {
		icon: 'shop',
		text: '店铺',
		infoColor: "red"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 0
	}])

	const buttonGroup = ref([{
		text: '加入购物车',
		backgroundColor: '#ff0000',
		color: '#fff'
	},
	{
		text: '立即购买',
		backgroundColor: '#ffa200',
		color: '#fff'
	}
	])

	onLoad(({ proid }) => {
		getGoodsDetailData(proid)

		// 给徽标赋值
		// options.value[2].info = store.totalCount
	})

	const getGoodsDetailData = async (proid : string) => {
		const res = await getGoodsDetail(proid)

		goodsDetail.value = res.data

		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: res.data.proname
		})
	}

	// 图片预览
	const preview = (current : number) => {
		uni.previewImage({
			urls: goodsDetail.value.banners[0].split(','),
			current
		})
	}

	// 加入购物车
	const onClick = (e : any) => {
		if (e.content.text === "购物车") {
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		}
	}
	const buttonClick = (e : any) => {
		if (e.content.text === '加入购物车') {
			const goods = {
				proid: goodsDetail.value.proid,
				proname: goodsDetail.value.proname,
				number: 1,
				price: goodsDetail.value.originprice,
				img: goodsDetail.value.img1,
				checked: true
			}

			store.addToCart(goods)

			// 给徽标赋值
			// options.value[2].info = store.totalCount

			uni.showToast({
				title: "加入购物车成功~",
				icon: 'none'
			})
		}
	}

	const add = () => {
		const goods = {
			proid: goodsDetail.value.proid,
			proname: goodsDetail.value.proname,
			number: 1,
			price: goodsDetail.value.originprice,
			img: goodsDetail.value.img1,
			checked: true
		}

		store.addToCart(goods)

		uni.showToast({
			title: "加入购物车成功~",
			icon: 'none'
		})
	}

	watch(() => store.totalCount, () => {
		options.value[2].info = store.totalCount
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	swiper {
		height: 700rpx;

		swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.info {
		padding: 10px;

		.price {
			font-size: 20px;
			color: red;
			font-weight: bold;
		}
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>